@import '../../variables.less';

.addressBook {
	display: flex;
	.leftContainer {
		// flex: 5;
		width: @left-container-width;
		background-color: @primary-border_bg-color;
		display: flex;
		flex-direction: column;
		border-right: @primary-border_bg-color 0.2px solid;
		height: 600px;
		.search {
			height: 60px;
		}
		.list {
			height: 540px;
			.addressBookTabs {
				width: 100%;
				height: 100%;
				// :global {
				// 	.ant-tree {
				// 		background-color: @primary-border_bg-color;
				// 		.ant-tree-treenode {
				// 			width: 100%;
				// 			padding: 3px 0;
				// 		}
				// 		.ant-tree-treenode-selected::before {
				// 			display: none;
				// 		}
				// 		.ant-tree-treenode-selected {
				// 			background-color: @item-selected-bg-color;
				// 		}
				// 		.ant-tree-switcher-noop {
				// 			display: none;
				// 		}
				// 		.ant-tree-treenode-switcher-close,
				// 		.ant-tree-treenode-switcher-open {
				// 			.ant-tree-switcher-noop {
				// 				display: block;
				// 			}
				// 		}
				// 	}
				// }
				.friendTree {
					width: 100%;
					height: 493px;
					overflow: scroll;
					.nodeContent {
						display: flex;
						align-items: center;
						justify-content: space-between;
						padding-right: 10px;
						img {
							width: 35px;
							height: 35px;
							margin-right: 20px;
						}
						span {
							max-width: 120px;
							font-size: 15px;
							color: @font-color;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
						}
						.friendStatus {
							margin-left: auto;
						}
					}
				}
				.groupChatList {
					width: 100%;
					height: 493px;
					display: flex;
					flex-direction: column;
					overflow: scroll;
					.groupChat {
						display: flex;
						align-items: center;
						border-bottom: 0.3px solid @item-border-color;
						cursor: pointer;
						padding: 10px;
						img {
							width: 40px;
							height: 40px;
							margin-right: 20px;
						}
						span {
							max-width: 120px;
							font-size: 15px;
							color: @font-color;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
						}
					}
					.curGroupChatInfo {
						background-color: @item-selected-bg-color;
					}
					.groupChat:hover {
						background-color: @item-hover-bg-color;
					}
					.groupChat:nth-child(1) {
						border-top: 0.3px solid @item-border-color;
					}
				}
				.friendTree::-webkit-scrollbar,
				.groupChatList::-webkit-scrollbar {
					width: 1px;
				}
				.friendTree::-webkit-scrollbar-thumb,
				.groupChatList::-webkit-scrollbar-thumb {
					border-radius: 5px;
					background-color: transparent;
				}
				.friendTree:hover::-webkit-scrollbar-thumb,
				.groupChatList:hover::-webkit-scrollbar-thumb {
					background-color: @scrollbar-thumb-color;
				}
			}
		}
	}
	.rightContainer {
		flex: 12;
		background-color: @deeply-border_bg-color;
		display: flex;
		justify-content: center;
		align-items: center;
		.infoModal {
			background-color: rgba(229, 229, 229, 0.3);
			display: flex;
			flex-direction: column;
			width: 60%;
			height: 70%;
			padding: 20px;
			.infoContainerHead {
				flex: 2.2;
				display: flex;
				.avatar {
					display: flex;
					justify-content: center;
					align-items: flex-start;
					margin-top: 10px;
					img {
						width: 80px;
						height: 80px;
					}
				}
				.info {
					padding-left: 20px;
					padding-top: 10px;
					color: @font-color-lightest;
					font-size: 12px;
					display: flex;
					flex-direction: column;
					.username {
						font-size: 30px;
						color: @font-color-light;
					}
					.signature {
						width: 200px;
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 2;
					}
					.signature::before {
						margin-right: 3px;
					}
				}
			}
			.changeContainer {
				flex: 5;
				display: flex;
				border-top: 1px solid @primary-border_bg-color;
				justify-content: center;
				padding: 10px 0 0 0;
				form {
					width: 100%;
					input {
						border: none;
						box-shadow: none;
						border-radius: 0;
						background-color: transparent;
						box-shadow: none;
					}
					// :global {
					// 	.ant-form-item {
					// 		margin-bottom: 0;
					// 		label {
					// 			font-size: 12px;
					// 			letter-spacing: 5px;
					// 		}
					// 		input {
					// 			line-height: 1;
					// 			padding: none;
					// 		}
					// 		.ant-select-selector {
					// 			background-color: transparent;
					// 			box-shadow: none;
					// 		}
					// 	}
					// 	.ant-form-item:nth-child(3) {
					// 		input {
					// 			border-bottom: 1px solid @primary-border_bg-color;
					// 		}
					// 	}
					// }
				}
			}
			.infoContainerBody {
				flex: 5;
				display: flex;
				border-top: 1px solid @primary-border_bg-color;
				justify-content: center;
				padding: 10px 0 0 0;
				.homePage {
					display: flex;
					flex-direction: column;
					span {
						padding: 10px;
					}
				}
				.memberTable {
					width: 100%;
					height: 160px;
					.tableTitle,
					.tableItem {
						display: flex;
						justify-content: space-between;
						color: @font-color-lightest;
						border-bottom: @primary-color solid 1px;
						li {
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
							text-align: center;
						}
						li:nth-child(1) {
							width: 60px;
						}
						li:nth-child(2) {
							width: 60px;
						}
						li:nth-child(3) {
							width: 100px;
						}
						li:nth-child(4) {
							width: 100px;
						}
					}
					.tableTitle {
						color: @font-color-lighter;
					}
					.tableContent {
						width: 100%;
						height: 140px;
						overflow-y: scroll;
					}
					.tableContent::-webkit-scrollbar {
						width: 1px;
					}
					.tableContent::-webkit-scrollbar-thumb {
						border-radius: 5px;
						background-color: transparent;
					}
					.tableContent:hover::-webkit-scrollbar-thumb {
						background-color: @scrollbar-thumb-color;
					}
				}
			}
			.btns {
				display: flex;
				justify-content: space-between;
				padding: 0 20px;
				button {
					font-size: 12px;
				}
			}
		}
	}
}
// :global {
// // * 微信样式图标
// 	.anticon-wechat {
// 		color: @font-color-lightest;
// 		font-size: 80px;
// 	}
// 	.ant-select-dropdown {
// 		font-size: 12px;
// 	}
// 	.ant-tabs {
// 		width: 100%;
// 		height: 100%;
// 		.ant-tabs-content {
// 			width: 100%;
// 			height: 100%;
// 			.ant-tabs-tabpane {
// 				width: 100%;
// 				height: 100%;
// 			}
// 		}
// 	}
// 	.ant-tabs-nav-list {
// 		width: 100%;
// 		.ant-tabs-tab {
// 			flex: 1;
// 			justify-content: center;
// 		}
// 	}
// 	.ant-tabs-nav-list::before {
// 		width: 50%;
// 	}
// 	.ant-tabs-nav-list::after {
// 		width: 50%;
// 	}
// 	.ant-modal-footer {
// 		display: flex;
// 		justify-content: space-between;
// 		padding: 0 60px;
// 	}
// }
